v-if v-show

v-if/v-show 条件付きレンダリング

v-if

式の結果に応じてDOM要素を追加、削除する

式の評価結果があまり変わらない時

最終的に描画される結果に、<template>が含まれない

また、conseoleでのエラー対策でもよく使う

v-show

スタイルのdisplayプロパティの値を変更して実現

頻繁に評価結果を更新する場合

keyによる再利用可能な制御

code:key.js

<template v-if="loginType === 'username'">

<label>Username</label>

<input placeholder="Enter your username" key="username-input">

</template>

<template v-else>

<label>Email</label>

<input placeholder="Enter your email address" key="email-input">

</template>